const { resolve } = require("path");

const HTMLWebpackPlugin = require("html-webpack-plugin");

module.exports = {
	// 入口
	entry: "./src/main.js",
	// 出口：文件打包地址
	output: {
		filename: "[name].js",
		path: resolve(__dirname, "./build"),
	},
	/*
        面试题:请问loader和plugin的区别?
            webpack认识哪些类型的文件?
                webpack其实只认得js和json文件

                loader是用于帮助webpack解析其他无法识别的类型文件
                    例如使用less以及less-loader来解析less文件,
                        其中less才是真正具有解析能力的包,而less-loader并不具有解析能力,他只是中间的桥梁
                plugins是用来实现某些特定功能(不是用来解析某些文件的)
                
                loader中的use数组,使用loader的顺序是从下往上
    */
	module: {
		// 解析的module规则
		rules: [
			{
				test: /.less$/,
				// loader中的use数组,使用loader的顺序是从下往上
				use: ["style-loader", "css-loader", "less-loader"],
			},

			{
				test: /.css$/,
				use: ["style-loader", "css-loader"],
			},
		],
	},
	// 插件
	plugins: [
		// 让HTML定义模板文件引入到打包文件中
		new HTMLWebpackPlugin({
			path: "./public/index.html",
		}),
	],
	// 打包的模式
	mode: "development", //开发环境development,生产环境production,
	devServer: {
		port: 9000,
		proxy: {
			"/api": {
				target: "http://www.baidu.com", //代理服务器
				changeOrigin: true, //允许跨域
				pathRewrite: {
					//路径重写
					"^/api": "",
				},
			},
		},
	},
	resolve: {
		alias: {
			"@": resolve(__dirname, "./src"), //允许使用@
		},
		extensions: [".js", ".json", ".vue", ".css"], //自动识别文件后缀补全
	},
};
